extends ../layout

block content
    - var categories = []
    - var num = [userInfo.original_musics.length,userInfo.derivative_musics.length,userInfo.collected_musics.length]
    - var message_categories = ['自制音乐','改编音乐','收藏音乐']
    - var e_cate = []
    if num[0] > 0
        -e_cate.push('original_musics')
        -categories.push('自制音乐');
    if num[1] > 0
        -e_cate.push('derivative_musics')
        -categories.push('改编音乐');
    if num[2] > 0
        -e_cate.push('collected_musics')
        -categories.push('收藏音乐');
    link(rel='stylesheet', href='/stylesheets/individual.css')
    script(src='/javascripts/individual.js')

    include ../top_marked
    include ../header
    include ../top_button

    div.category-menu
        div.container
            div.ui.large.secondary.pointing.menu
                each category in categories
                    a.item(href='#'+'#{category}') #{category}

    div.page-content
        div.person_top
            div.category
                div.container
                    div.content-wrapper
                        div.left_head
                            if userInfo.profile
                                img.ui.medium.circular.image.myimage(src='uploads/heads/#{userInfo.profile}')
                            else
                                img.ui.medium.circular.image.myimage(src="/resources/images/default_head.jpg")
                        div.message
                            div.name #{userInfo.username}
                            if userInfo.introduction == "" || userInfo.introduction == undefined
                                if user
                                    if user._id == userInfo._id
                                        div.detail_message 你还没有填写个人简介，介绍一下自己可以增加存在感哦~
                                    else
                                        这个人没有填简介呢......
                                else
                                    这个人没有填简介呢......
                            else
                                div.detail_message #{userInfo.introduction}
                            div.ui.dividing.header
                            div.detail_music 
                                -for(var i = 0; i < 3; i++) 
                                    span(style="font-weight:bold;") #{message_categories[i]} ( #{num[i]} ) 
                            if user
                                if user._id == userInfo._id
                                    a(href="/user/update/#{user._id}").ui.green.button(style="margin-top:10px;") 修改个人信息


        div.music_repository
            - for (var i = 0; i < categories.length; i++)
                div.category
                    a.anchor(id='#{categories[i]}')
                    if userInfo[(e_cate[i])].length < 10
                        -var i_num = userInfo[(e_cate[i])].length
                    if userInfo[(e_cate[i])].length >= 10
                        -var i_num = 10
                    if i_num <= 5
                        -var small_mode = true
                    else
                        -var small_mode = false
                    if small_mode
                        div.container(style="height:220px;")
                            div.l-list(style="float:none;")
                                div.ui.secondary.menu
                                    div.item
                                        h2 #{categories[i]} ( #{userInfo[(e_cate[i])].length} )
                                    div.right.menu
                                        div.item
                                            div.ui.basic.button(id="#{e_cate[i]}_left_button",style="margin-right:15px;") 上一页
                                            div.ui.basic.button(id="#{e_cate[i]}_right_button") 下一页
                                div.content-wrapper
                                    ul(id = "#{e_cate[i]}")
                                        - for (var j = 1; j <= i_num; ++j)
                                            li
                                                a(href="/music?music_id=#{userInfo[(e_cate[i])][userInfo[(e_cate[i])].length-j]['_id']}")
                                                    div.ui.card.small-item
                                                        div.blurring.dimmable.image.small-item
                                                            if userInfo[(e_cate[i])][userInfo[(e_cate[i])].length-j]['cover']
                                                                img(src="/uploads/covers/#{userInfo[(e_cate[i])][userInfo[(e_cate[i])].length-j]['cover']}")
                                                            else
                                                                img(src='/resources/images/default_cover.png')
                                                            div.ui.dimmer
                                                                div.content
                                                                    i.large.play.icon
                                                a(align="center" href="/music?music_id=#{userInfo[(e_cate[i])][userInfo[(e_cate[i])].length-j]['_id']}") #{userInfo[(e_cate[i])][userInfo[(e_cate[i])].length-j]['name']}

                    else
                        div.container
                            div.l-list(style="float:none;")
                                div.ui.secondary.menu
                                    div.item
                                        h2 #{categories[i]} ( #{userInfo[(e_cate[i])].length} )
                                    div.right.menu
                                        div.item
                                            div.ui.basic.button(id="#{e_cate[i]}_left_button",style="margin-right:15px;") 上一页
                                            div.ui.basic.button(id="#{e_cate[i]}_right_button") 下一页
                                div.content-wrapper
                                    ul(id = "#{e_cate[i]}")
                                        - for (var j = 1; j <= i_num; ++j)
                                            li
                                                a(href="/music?music_id=#{userInfo[(e_cate[i])][userInfo[(e_cate[i])].length-j]['_id']}")
                                                    div.ui.card.small-item
                                                        div.blurring.dimmable.image.small-item
                                                            if userInfo[(e_cate[i])][userInfo[(e_cate[i])].length-j]['cover']
                                                                img(src="/uploads/covers/#{userInfo[(e_cate[i])][userInfo[(e_cate[i])].length-j]['cover']}")
                                                            else
                                                                img(src='/resources/images/default_cover.png')
                                                            div.ui.dimmer
                                                                div.content
                                                                    i.large.play.icon
                                                a(align="center" href="/music?music_id=#{userInfo[(e_cate[i])][userInfo[(e_cate[i])].length-j]['_id']}") #{userInfo[(e_cate[i])][userInfo[(e_cate[i])].length-j]['name']}

    script.
        window.user = !{JSON.stringify(userInfo)};
        //window.user2 = !{JSON.stringify(user)};
        //console.log(user2);
        //console.log(user);
        //console.log(user['collected_musics'][0])
        //console.log(user['collected_musics'][0]['cover'])
        //console.log(user['collected_musics'][0]['name'])

    include ../footer